<template>
    <div>
        <page-main>
            <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
        </page-main>
        <page-main>
            <el-table
                ref="singleTable"
                :data="tableData"
                highlight-current-row
                @current-change="handleCurrentChange"
                style="width: 100%;">
                <el-table-column
                    type="index"
                    width="50">
                </el-table-column>
                <el-table-column
                    property="name"
                    label="角色名称"
                    width="120">
                </el-table-column>
                <el-table-column
                    property="remark"
                    label="备注">
                </el-table-column>
                <el-table-column
                    property="created_at"
                    label="添加时间"
                    width="140">
                </el-table-column>
                <el-table-column
                    property="created_at"
                    label="更新时间"
                    width="140">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" style="margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40,50]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
                </el-pagination>
            </div>
        </page-main>
        <el-dialog title="角色" :visible.sync="dialogFormVisible" width="40%">
            <el-form :model="form">
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.remark"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [{
                created_at: '2016-05-02',
                name: '王小虎',
                remark: '上海市普陀区金沙江路 1518 弄'
            }, {
                created_at: '2016-05-04',
                name: '王小虎',
                remark: '上海市普陀区金沙江路 1517 弄'
            }, {
                created_at: '2016-05-01',
                name: '王小虎',
                remark: '上海市普陀区金沙江路 1519 弄'
            }, {
                created_at: '2016-05-03',
                name: '王小虎',
                remark: '上海市普陀区金沙江路 1516 弄'
            }],
            currentRow: null,
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            currentPage: 1,
            formLabelWidth: '120px'
        }
    },
    mounted() {
        this.$api.get('/role_list/10')
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.error(error);
            });
    },
    methods: {
        setCurrent(row) {
            this.$refs.singleTable.setCurrentRow(row);
        },
        handleCurrentChange(val) {
            this.currentRow = val;
        },
        handleEdit(index, row) {
            console.log(index, row);
            this.dialogFormVisible = true
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handlePageChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
}
</script>

